<template>
  <div class="roles">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="->">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="javascript:;">权限管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 添加角色-->
    <el-button type="primary" plain class="add-user" @click="dialogVisible = true">添加角色</el-button>
    <!-- 权限表格 -->
    <el-table :data="rolesList" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="firstItem in scope.row.children" :key="firstItem.id" class>
            <el-col :span="4" class="mb-15">
              <el-tag closable>{{firstItem.authName}}</el-tag>
              <!-- 判断右箭头是否显示 -->
              <i class="el-icon-arrow-right" v-if="firstItem.children.length > 0"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="secItme in firstItem.children" :key="secItme.id">
                <el-col :span="4">
                  <el-tag closable type="success">{{secItme.authName}}</el-tag>
                  <i class="el-icon-arrow-right" v-if="secItme.children.length > 0"></i>
                </el-col>
                <el-col :span="20" style="padding-left:15px;">
                  <el-tag
                    v-for="lastItem in secItme.children"
                    :key="lastItem.id"
                    closable
                    type="danger"
                    class="mb-15 mr-15"
                  >{{lastItem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="scope.row.children.length<=0">该角色没有分配权限，请前往分配！</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
          <el-button type="success" icon="el-icon-check" circle @click="userRoles()"></el-button>
          <el-button type="danger" icon="el-icon-delete" @click.native="handleDelete(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加用户对话框 -->
    <el-dialog title="添加角色" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form :model="adduser" :rules="addRules" ref="addUserRef" status-icon class="container">
        <!-- 角色名称 -->
        <el-form-item prop="roleName" label="角色名称" label-width="100px">
          <el-input
            v-model="adduser.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="roleDesc" label="角色描述" label-width="100px">
          <!--  角色描述 -->
          <el-input
            v-model="adduser.roleDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 授权角色对话框 -->
    <el-dialog title="角色授权" :visible.sync="userSouquan">
        <!-- 添加树形控件 -->
        <div class="tree-bo">
            <el-tree
        :props="rightList"
        lazy
        >

        </el-tree>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入api
import { getUser, addUser, delUser, getRights } from '@/api'
export default {
  data () {
    return {
      rolesList: [],
      //   添加用户显示
      adduser: { roleName: '', roleDesc: '' },
      // 规则验证
      addRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [{ message: '请输入角色描述', trigger: 'blur' }]
      },
      //   添加用户对话框显示
      dialogVisible: false,
      //   角色授权
      userSouquan: false,
      //   树形控件
      rightList: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    //   初始化页面 发送请求 获取第一页的数据
    init () {
      getUser().then(res => {
        //   console.log(res)
        if (res.meta.status === 200) {
          this.rolesList = res.data
        }
      })
    },
    // 添加角色
    addUser () {
      // 获取参数  adduser
    //   校验
      this.$refs['addUserRef'].validate((isPass) => {
        if (isPass) {
          // 发送请求
          addUser(this.adduser)
            .then(res => {
              if (res.meta.status === 201) {
                this.$message.success(res.meta.msg)
                //  刷新页面
                this.init()
                // 关闭页面
                this.dialogVisible = false
                // 重置表单
                this.$refs['addUserRef'].resetFields()
              } else {
                this.$message.error(res.meta.msg)
              }
            })
        } else {
          // 提示信息
          this.$message.error('请输入角色名称')
        }
      })
    },
    // 关闭添加角色对话框
    handleClose (done) {
      // 重置表单
      this.$refs['addUserRef'].resetFields()
      done()
    },
    // 取消添加角色
    close () {
      this.$refs['addUserRef'].resetFields()
      // 关闭对话框
      this.dialogVisible = false
    },
    // 编辑
    handleEdit (row) {},
    // 删除
    handleDelete (row) {
      console.log(row)
      delUser(~~row.id)
        .then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            // 弹框提示
            this.$message.success(res.meta.msg)
            //   刷新页面
            this.init()
          } else {
            this.$message.error(res.meta.msg)
          }
        })
    },
    // 点击打开新闻列表
    userRoles () {
      this.userSouquan = true
      getRights('tree')
        .then(res => {
          if (res.meta.status === 200) {
            console.log(res)
          } else {

          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .roles {
    .el-icon-arrow-right {
      margin-left: 5px;
    }
    .add-user {
      margin: 15px 0;
    }
  }
</style>
